<template>
  <div class="center-overview" :style="style">
    <div class="center-overview-garbage">
      <OverviewItem
        title="线索受理"
        title1="总数"
        :num1="garbageDataClue.yearTotalCount"
        unit1="条"
        title2="本月"
        :num2="garbageDataClue.monthTotalCount"
        unit2="条"
      />
      <OverviewItem
        title="线索处置"
        title1="总数"
        :num1="garbageDataClue.yearTimelyCount"
        unit1="条"
        title2="本月"
        :num2="garbageDataClue.monthTimelyCount"
        unit2="条"
      />
      <OverviewItem
        title="线索逾期"
        title1="总数"
        :num1="garbageDataClue.yearOverdueCount"
        unit1="条"
        title2="本月"
        :num2="garbageDataClue.monthOverdueCount"
        unit2="条"
      />
      <OverviewItem
        title="立案统计"
        title1="总数"
        :num1="garbageDataFiling.yearTotalCount"
        unit1="条"
        title2="本月"
        :num2="garbageDataFiling.monthTotalCount"
        unit2="条"
      />
      <OverviewItem
        title="结案统计"
        title1="总数"
        :num1="garbageDataFiling.yearTimelyCount"
        unit1="条"
        title2="本月"
        :num2="garbageDataFiling.monthTimelyCount"
        unit2="条"
      />
      <OverviewItem
        title="案件逾期"
        title1="总数"
        :num1="garbageDataFiling.yearOverdueCount"
        unit1="条"
        title2="本月"
        :num2="garbageDataFiling.monthOverdueCount"
        unit2="条"
      />
    </div>
  </div>
</template>
<script>
import OverviewItem from './OverviewItem.vue'
import { getClueAmountOverview } from '@/api/clue'
import { getFilingAmountOverview } from '@/api/filing'
export default {
  components: { OverviewItem },
  props: {
    year: Number
  },
  data() {
    return {
      style: {
        width: '900px',
        height: '122px'
      },
      garbageDataClue: {},
      garbageDataFiling: {}
    }
  },
  watch: {
    year(newVal, oldVal) {
      this.getData()
    }
  },
  mounted() {
    this.getData()
    this.getComputedStyle()
    window.addEventListener('resize', this.getComputedStyle)
  },
  methods: {
    getComputedStyle() {
      const element = document.getElementById('big-screen-map')
      if (element.clientWidth <= 1780) {
        this.style.width = '700px'
      }
      if (element.clientWidth <= 1560) {
        this.style.width = '650px'
      }
      if (element.clientWidth <= 1300) {
        this.style.width = '600px'
      }
      if (element.clientWidth <= 1000) {
        this.style.width = '500px'
      }
      if (element.clientWidth <= 800) {
        this.style.width = '400px'
      }
      if (element.clientWidth > 1780) {
        this.style.width = '900px'
      }
    },
    getData() {
      const params = this.getParams()
      getClueAmountOverview(params).then((res) => {
        this.garbageDataClue = res.data
      })
      getFilingAmountOverview(params).then((res) => {
        this.garbageDataFiling = res.data
      })
    },
    getParams() {
      const params = {
        startDate: `${this.year}-01-01`,
        endDate: `${this.year}-12-31`
      }
      return params
    }
  }
}
</script>
<style lang="scss">
.center-overview {
  width: 900px;
  height: 122px;
  background: url("../assets/images/center-bg.png");
  background-size: 100% 100%;
  padding: 15px;
  box-sizing: border-box;

  &-garbage {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .center-overview-num-item {
      height: 100%;
      justify-content: space-around;
    }
  }
}
</style>
